<template>

	<view>
		<image class="logo" src="@/static/立即联系.png"></image>
		<view class="container">

			<view class="header">
				<text class="title">使用帮助</text>
				<text class="subtitle">USE HELP</text>
			</view>
			<view class="faq-section">
				<view v-for="(item, index) in faqList" :key="index" @click="toggleFaq(index)" class="faq-item">
					<text class="faq-question">{{ index + 1 }}. {{ item.question }}</text>
					<view v-if="item.open" class="faq-answer">
						<text>{{ item.answer }}</text>
					</view>
				</view>
			</view>
			<!--    <view class="buttons-section">
      <button class="button" @click="makePhoneCall('4009930031')">转接客服</button>
    </view>
    <view class="buttons-section">
      <button class="button" @click="makePhoneCall('4009930031')">在线客服</button>
    </view> -->
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				faqList: [{
						question: '充电器怎么使用？',
						answer: '充电器通电且指示灯亮起→微信扫码进入小程序→授权登录→点击 “开始充电” →支付预付费→点击 “完成” →获取充电密码→充电密码输入在充电器数字按键上提示正确即可充电',
						open: false
					},
					{
						question: '怎么结束充电？',
						answer: '充电完成后请拔下插头，确认指示灯熄灭后再扫码充电器二维码，进入密码页点击“历史订单”，找到进行中的订单并点击“结束充电”即可。若充电器已不在身边，返回上一页找到“历史订单”，点击进入找到进行中的订单并点击“结束充电”。',
						open: false
					},
					{
						question: '怎么退预付金？',
						answer: '充电完成后请您先按使用流程结束充电。预付金扣除充电费用剩余部分将会在结束充电3个工作日后返还至您的钱包。请您在钱包到账后，回到小程序首页→点击“我的钱包”，查看到有余额，点击“提现”。若“我的钱包”内没有余额，请留意到账中的预计到账时间，耐心等待到账时间再进行提现。',
						open: false
					},
					{
						question: '怎么查询订单信息？',
						answer: '返回上一页，找到“历史订单”，选择对应订单类型，可以上下滑动找到自己想要查询的订单。',
						open: false
					},
					{
						question: '没有办法充电？',
						answer: '请确认是否有按操作规范使用：把充电器从插座拔下，等指示灯熄灭后重新插上。指示灯重新亮起后，根据充电器上的免费充电5分钟操作提示在数字键盘上正确输入试用密码，插上手机查看能否正常使用。如果能正常使用，则操作失误导致，请在免费充电时间结束后拔下插头，指示灯熄灭后重新插上电源，扫码获取新密码输入在设备按键上即可正常使用。若还是不能正常使用，请您点击下方的“转接客服”，耐心等待客服为您核实处理。',
						open: false
					},
					{
						question: '重新扫码会重复扣费吗',
						answer: '使用结束前只要您不主动结束订单是不会重复扣费的，如需重新获取密码，再次扫码/进入小程序刷新密码即可。',
						open: false
					},
					{
						question: '我是商家，我的账户为什么不能提现',
						answer: '请确认微信账户与公司登记账户实名是否一致，实名一致的情况下才能提现。',
						open: false
					}
				]
			};
		},
		methods: {
			toggleFaq(index) {
				this.faqList[index].open = !this.faqList[index].open;
			},
			makePhoneCall(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber,
					fail: (error) => {
						console.error('拨打电话失败', error);
					}
				});
			}
		}
	};
</script>

<style>
	.logo {
		height: 200upx;
		width: 100%;
	}
	.container {
		padding: 20px;
		background: linear-gradient(180deg, #f0f0f0 0%, #d0eaff 100%);
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
	}

	.subtitle {
		font-size: 16px;
		color: #999;
	}

	.faq-section {
		margin-bottom: 20px;
		width: 100%;
	}

	.faq-item {
		background-color: #ffffff;
		padding: 15px;
		margin-bottom: 10px;
		border-radius: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		transition: transform 0.2s;
	}

	.faq-item:hover {
		transform: translateY(-5px);
	}

	.faq-question {
		font-size: 18px;
		font-weight: bold;
	}

	.faq-answer {
		margin-top: 10px;
		color: #555;
	}

	.buttons-section {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-top: 4px;
	}

	.button {
		width: 98%;
		height: 50px;
		background-color: #00aaff;
		color: #ffffff;
		border: none;
		border-radius: 10px;
		font-size: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		transition: background-color 0.3s;
	}

	.button:last-child {
		margin-right: 0;
	}

	.button:hover {
		background-color: #008ecc;
	}
</style>